<template>
    <view class="target-container">
        <view class="target-card dark-purple-card">
            <view class="target-header">
                今日目标
            </view>
            <view class="target-content">
                <!-- <view class="content-circle">
                    <wd-circle v-model="progress" 
                    :color="gradientColor" 
                    :size="90" 
                    :strokeWidth="15"></wd-circle>
                </view> -->
                <view class="charts-box">
                    <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" :canvas2d="true"
                        canvasId="dopOsspwIaKkugebfFeiwWRzXXjPpaTC" />
                </view>

                <view class="content-text">
                    <view>今天计划学习{{ target }}题</view>
                    <view>已经学习{{ haveStudied }}题</view>
                    <view v-if="isFinished">恭喜完成目标！</view>
                    <view v-else>快去努力吧~</view>
                </view>
            </view>
        </view>
    </view>
</template>

<!-- 
<script setup>
import { ref, computed } from 'vue';
const target = ref(5);
const haveStudied = ref(4);
const progress = computed(() => {
    return haveStudied.value / target.value * 100
});
const isFinished = computed(() => {
    return progress.value >= 100;
});
const gradientColor = {
    '0%': '#ffd01e',
  '100%': '#ee0a24'
}

</script> -->

<script>
export default {
  data() {
    return {
      target: 20,
      haveStudied: 18,
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: undefined,
        title: {
          name: "……",
          fontSize: 23,
          color: "#2fc25b"
        },
        subtitle: {
          name: "进度",
          fontSize: 15,
          color: "#ffffff"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        }
      }
    };
  },
  computed: {
    progress() {
      return this.haveStudied / this.target;
    },
    isFinished() {
      return this.progress >= 1;
    },
  },
  created() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                name: "进度",
                color: "#2fc25b",
                data: [this.progress > 1 ? 1: this.progress]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
        this.opts.title.name = `${(this.progress * 100).toFixed(0)}%`;
      }, 500);
    },
  }
};
</script>

<style>
    .target-container{
        margin-top: 20px;
    }
    .target-card{
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-radius: 15px;
    }
    .target-header{
        font-size: large;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .target-content{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    /* .content-circle{

    } */
    .charts-box {
        width: 120px;
        height: 120px;
    }
    .content-text{
        line-height: 1.5;
    }
</style>